/*
  通用样式
 */

// 文字超出省略号
%ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
// 强制换行
%wrap {
  word-wrap: break-word;
  word-break: break-all;
}
//图片盒子
%imgBox{
  display: inline-block;
  font-size: 0;
  img{
    width: 100%;
    height: 100%;
  }
}

// 两行文本溢出省略符
%ellipsisTwoRows {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap:break-word;
  word-break:break-all;
}

/* item 底部1px */
%bor-b {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #D9D9D9;
  }
}
/* 万能清除浮动 */
%clearfix::after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
%clearfix {
  zoom: 1;
}
%fl{
  float: left;
}
%fr{
  float: right;
}
/* 垂直居中 父框 子框 */
%vertparent:after {
  content: '.';
  height: 100%;
  width: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}

%vertchild {
  display: inline-block;
  vertical-align: middle;
}
// 滚动条样式
%scrollbar {
  /* 火狐专属 */
  scrollbar-color: #c5c5c5 transparent;
  scrollbar-width: thin;
  /* webkit内核 */
  // 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  // 滚动条两端的按钮；可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
  &::-webkit-scrollbar-button {
    display: none;
  }
  // 外层轨道；可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
  &::-webkit-scrollbar-track {
    display: none;
  }
  // 内层轨道，滚动条中间部分（除去）
  &::-webkit-scrollbar-track-piece {
    display: none;
  }
  // 滚动条里面可以拖动的那部分
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #c5c5c5;
  }
  // 滚动条的底角，水平和垂直滚动条相遇。
  &::-webkit-scrollbar-corner {}
}


